import React from 'react'
//导入scss样式
//import './index.scss'
//导入module.css样式
import styles from './index.module.css'
//导入NavHeader组件
import NavHeader from '../../components/NavHeader'

//导入路由的跳转导航
import { Link } from 'react-router-dom'

//导入组件库中的loading组件
import { Toast } from 'antd-mobile'

//导入baseURL
import { BASE_URL } from '../../utils/url.js'

//导入api
import { instance } from '../../utils/api'

//导入HouseItem组件
import HouseItem from '../../components/HouseItem'

const BMap = window.BMap
export default class Map extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            //小区房源数据
            housesList: [],
            //小区房源列表是否展示
            isShowList: false
        }
    }

    //初始化地图
    initMap() {
        //创建地图实例
        const map = new BMap.Map('container')
        //获取当前的定位城市
        const { label, value } = JSON.parse(localStorage.getItem('now_city'))
        //设置中心点坐标
        //const point = new BMap.Point(116.404, 39.915)

        /* 
        地图找房-业务逻辑分析
        1.获取房源数据，渲染覆盖物
        2.点击覆盖物：
            放大地图
            获取数据，渲染下一级覆盖物
        3.区，镇覆盖物的点击事件，清除现在的覆盖物，获取下一级数据，创建新的覆盖物
        4.小区，不清楚覆盖物，移动地图，展示该小区下的房源信息

        获取所有区的信息
        1.发送请求获取房源数据
        2.遍历数据，创建覆盖物，给每一个覆盖物添加唯一标识
        3.给覆盖物添加点击事件
        4.在单击事件中，获取到当前单击项的唯一标识
        5.放大地图（级别为13），调用clearOverlays()方法清除当前覆盖物

        */
        //把map定义为全局变量，只要绑定this就可以了
        this.map = map

        const myGeo = new BMap.Geocoder();

        console.log(label);
        myGeo.getPoint(label, async (point) => {
            if (point) {
                //添加地图控件
                //添加平移缩放控件
                map.addControl(new BMap.NavigationControl());
                //添加比例尺控件
                map.addControl(new BMap.ScaleControl());
                //初始化地图，同时设置级别
                map.centerAndZoom(point, 11)


                this.renderOverlays(value)
                // //发送请求获取房源数据
                // const { data: res } = await axios.get('http://localhost:8080/area/map', {
                //     params: {
                //         id: value
                //     }
                // })
                // if (res.status !== 200) {
                //     return console.warn(res.description);
                // }
                // //遍历数据，创建覆盖物，给每一个覆盖物添加唯一标识
                // res.body.forEach(item => {
                //     console.log(item);
                //     const { coord: { latitude, longitude }, label: areaName, value, count } = item
                //     // 将地址解析结果显示在地图上，并调整地图视野  
                //     //当前的坐标对象
                //     const areaPosition = new BMap.Point(longitude, latitude)


                //     //添加文字标签
                //     const opts = {
                //         position: areaPosition,    // 指定文本标注所在的地理位置
                //         offset: new BMap.Size(30, -30)    //设置文本偏移量
                //     }
                //     const label = new BMap.Label("", opts);  // 创建文本标注对象

                //     //添加数据的唯一标识
                //     label.id = value

                //     //设置HTML的内容
                //     label.setContent(`
                //     <div class="${styles.bubble}">
                //         <p class="${styles.name}">${areaName}</p>
                //         <p>${count}套</p>
                //     </div>
                //     `)
                //     label.setStyle({
                //         cursor: 'pointer',
                //         border: '0px solid rgb(255,0,0)',
                //         padding: '0px',
                //         whiteSpace: 'nowrap',
                //         fontSize: '12px',
                //         color: 'rbg(255,255,255)',
                //         textAlign: 'center'
                //     })

                //     //给覆盖物添加点击事件
                //     label.addEventListener('click', () => {
                //         console.log('我被点击了' + label.id);
                //         //放大地图（级别为13）
                //         //初始化地图，同时设置级别
                //         //第一个参数：坐标对象
                //         //第二个参数：放大级别
                //         map.centerAndZoom(areaPosition, 13)
                //         //调用clearOverlays()方法清除当前覆盖物
                //         setTimeout(() => {
                //             map.clearOverlays()
                //         }, 0)
                //     })
                //     map.addOverlay(label);
                // })
            }
        }, label)
        //给地图绑定移动事件
        map.addEventListener('movestart', () => {
            if (this.state.isShowList) {
                this.setState({
                    isShowList: false
                })
            }
        })
    }

    //渲染覆盖物入口
    // 1 接收区域 id 参数，获取该区域下的房源数据
    // 2 获取房源类型以及下级地图缩放级别
    async renderOverlays(id) {
        //发送请求获取房源数据
        //Loading效果
        Toast.loading('加载中...', 0, null, false)
        const { data: res } = await instance.get('/area/map', {
            params: {
                id
            }
        })
        Toast.hide()
        if (res.status !== 200) {
            Toast.hide()
            return console.warn(res.description);
        }
        console.log(res);
        //调用 getTypeAndZoom 方法获取级别和类型
        const { nextZoom, type } = this.getTypeAndZoom()

        res.body.forEach(item => {
            console.log(item, nextZoom, type)
            this.createOverlays(item, nextZoom, type)
        })
    }

    // 计算要绘制的覆盖物类型和下一个缩放级别
    // 区   -> 11 ，范围：>=10 <12
    // 镇   -> 13 ，范围：>=12 <14
    // 小区 -> 15 ，范围：>=14 <16
    getTypeAndZoom() {
        //调用地图的 getZoom() 方法，获取当前的缩放级别
        const zoom = this.map.getZoom()
        console.log(zoom);
        let nextZoom, type
        switch (zoom) {
            case 11:
                nextZoom = 13
                type = 'circle'
                return { nextZoom, type }
            case 13:
                nextZoom = 15
                type = 'circle'
                return { nextZoom, type }
            default:
                type = 'rect'
                return { type }
        }
    }

    // 创建覆盖物
    createOverlays(item, zoom, type) {
        const { coord: { latitude, longitude }, label: areaName, value, count } = item
        const areaPosition = new BMap.Point(longitude, latitude)
        if (type === 'circle') {
            this.createCircle(areaPosition, areaName, value, count, zoom)
        } else {
            this.createRect(areaPosition, areaName, value, count)
        }
    }

    //创建区，镇覆盖物
    createCircle(areaPosition, areaName, value, count, zoom) {
        //添加文字标签
        const opts = {
            position: areaPosition,    // 指定文本标注所在的地理位置
            offset: new BMap.Size(30, -30)    //设置文本偏移量
        }
        const label = new BMap.Label("", opts);  // 创建文本标注对象

        //添加数据的唯一标识
        label.id = value

        //设置HTML的内容
        label.setContent(`
                    <div class="${styles.bubble}">
                        <p class="${styles.name}">${areaName}</p>
                        <p>${count}套</p>
                    </div>
                    `)
        label.setStyle({
            cursor: 'pointer',
            border: '0px solid rgb(255,0,0)',
            padding: '0px',
            whiteSpace: 'nowrap',
            fontSize: '12px',
            color: 'rbg(255,255,255)',
            textAlign: 'center'
        })

        //给覆盖物添加点击事件
        label.addEventListener('click', () => {
            console.log('我被点击了' + label.id);
            // 调用 renderOverlays 方法，获取该区域下的房源数据
            this.renderOverlays(label.id)
            //放大地图（级别为13）
            //初始化地图，同时设置级别
            //第一个参数：坐标对象
            //第二个参数：放大级别
            this.map.centerAndZoom(areaPosition, zoom)
            //调用clearOverlays()方法清除当前覆盖物
            setTimeout(() => {
                this.map.clearOverlays()
            }, 0)
        })
        this.map.addOverlay(label);
    }

    // 创建小区覆盖物
    createRect(areaPosition, areaName, value, count, zoom) {
        //添加文字标签
        const opts = {
            position: areaPosition,    // 指定文本标注所在的地理位置
            offset: new BMap.Size(50, -28)    //设置文本偏移量
        }
        const label = new BMap.Label("", opts);  // 创建文本标注对象

        //添加数据的唯一标识
        label.id = value

        //设置HTML的内容
        label.setContent(`
            <div class="${styles.rect}">
            <span class="${styles.housename}">${areaName}</span>
            <span class="${styles.housenum}">${count}套</span>
            <i class="${styles.arrow}"></i>
            </div>
                    `)
        label.setStyle({
            cursor: 'pointer',
            border: '0px solid rgb(255,0,0)',
            padding: '0px',
            whiteSpace: 'nowrap',
            fontSize: '12px',
            color: 'white',
            textAlign: 'center'
        })

        //给覆盖物添加点击事件
        label.addEventListener('click', e => {
            console.log('我被点击了' + label.id);
            //获取小区房源数据
            this.getHousesList(value)
            // 获取当前被点击项
            const target = e.changedTouches[0]
            //将光标定在视图中央
            this.map.panBy(
                window.innerWidth / 2 - target.clientX,
                (window.innerHeight - 330) / 2 - target.clientY
            )
        })
        this.map.addOverlay(label);
    }

    //获取小区房源数据
    async getHousesList(id) {
        //Loading效果
        Toast.loading('加载中...', 0, null, false)
        const { data: res } = await instance.get('/houses', {
            params: {
                cityId: id
            }
        })
        Toast.hide()
        if (res.status !== 200) {
            Toast.hide()
            return console.warn(res.description);
        }
        this.setState(() => {
            return {
                housesList: res.body.list,
                isShowList: true
            }
        })

    }


    //封装房屋的结构
    // renderHousesList() {
    //     console.log(BASE_URL);
    //     return this.state.housesList.map(item => (
    //         <div className={styles.house} key={item.houseCode}>
    //             <div className={styles.imgWrap}>
    //                 <img className={styles.img} src={BASE_URL + item.houseImg} alt="" />
    //             </div>
    //             <div className={styles.content}>
    //                 <h3 className={styles.title}>{item.title}</h3>
    //                 <div className={styles.desc}>{item.desc}</div>
    //                 <div>
    //                     {/* ['近地铁', '随时看房'] */}
    //                     {item.tags.map((tag, index) => {
    //                         const tagClass = 'tag' + (index + 1)
    //                         return (
    //                             <span
    //                                 className={[styles.tag, styles[tagClass]].join(' ')}
    //                                 key={tag}
    //                             >
    //                                 {tag}
    //                             </span>
    //                         )
    //                     })}
    //                 </div>
    //                 <div className={styles.price}>
    //                     <span className={styles.priceNum}>{item.price}</span> 元/月
    //                 </div>
    //             </div>
    //         </div>
    //     )
    //     )
    // }




    componentDidMount() {
        this.initMap()
    }

    // componentDidUpdate(prevProps) {
    //     if (prevProps.count !== this.props.count) {
    //         //this.setState({})
    //     }
    // }

    // shouldComponentUpdate() {
    //     return true
    // }

    // componentWillUnmount() { }

    render() {
        return (
            <div className={styles.map}>
                {/* 顶部导航栏 */}
                <NavHeader className={styles.navBar}>地图找房</NavHeader>
                {/* 地图容器元素 */}
                <div id='container' className={styles.container}></div>
                {/* 房源列表 */}
                {/* 添加 styles.show 展示房屋列表 */}
                <div
                    className={[
                        styles.houseList,
                        this.state.isShowList ? styles.show : ''
                    ].join(' ')}
                >
                    <div className={styles.titleWrap}>
                        <h1 className={styles.listTitle}>房屋列表</h1>
                        <Link className={styles.titleMore} to="/home/list">
                            更多房源</Link>
                    </div>
                    <div className={styles.houseItems}>
                        {/* 房屋结构 */}
                        {/* {this.renderHousesList()} */}
                        {this.state.housesList.map(item => (
                            <HouseItem
                                key={item.houseCode}
                                src={BASE_URL + item.houseImg}
                                title={item.title}
                                desc={item.desc}
                                tags={item.tags}
                                price={item.price}
                            ></HouseItem>
                        ))}
                    </div>
                </div>
            </div>
        )
    }
}
